<template>
    <div class="login">
        <div class="pople">
            <img src="./img/1.png" width="100px"/>
        </div>
        <div class="tubiao1">
            <img src="./img/2.png" width="400px">
        </div>
        <div class="tubiao2">
            <img src="./img/2.png" width="400px">
        </div>
        <el-form :rules="loginFormRules" :model="loginForm" class="loginRoot" ref="form" router>
            <h2 class="loginTitle">思云课堂后台业务管理系统</h2>
            <p>Business Manaaement Svstem</p>
            <el-form-item prop="account">
                <el-input type="text" style="width: 80%" v-model="loginForm.account" placeholder="请输入用户名" prefix-icon="el-icon-s-custom"/>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="text" style="width: 80%" v-model="loginForm.password" placeholder="请输入密码" show-password prefix-icon="el-icon-lock"/>
            </el-form-item>
            <el-form-item prop="code">
                <el-input type="text" style="width: 80%" v-model="loginForm.code" placeholder="请输入密码"  prefix-icon="el-icon-lock"/>
                <img id="loginImg" src="http://localhost:8081/user/captcha" @click="changImage"/>
            </el-form-item>
            <el-button type="primary" @click="onsubmit">登陆</el-button>
            <el-button>注册</el-button>
        </el-form>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loginForm:{
                    account:'',
                    password:'',
                    code:'',
                },
                //表单验证
                loginFormRules:{
                    account:[
                        {required:true,message:'账号不能为空',trigger:'blur'},
                        {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
                    ],
                    password:[
                        {required:true,message:'密码不能为空',trigger:'blur'},
                        {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
                    ],
                    code:[
                        {required:true,message:'验证码不能为空',trigger:'blur'},
                    ]
                }
            }
        },
        methods:{
            onsubmit(){
                this.$http.post("/user/toLogin",this.loginForm).then(res =>{
                    this.loginForm = res.data;
                    console.log(res.data)
                    console.log(res.data.state);
                    if(res.data.state == "该用户名不存在"){
                        alert("该用户名不存在");
                    }else if(res.data.state == "登录成功"){
                        alert("登录成功")
                    }else if(res.data.state == "密码错误"){
                        alert("密码错误")
                    }else if(res.data.state == "验证码错误"){
                        alert("验证码错误")
                    }
                })
            },
            changImage(){
                var $img =document.getElementById("loginImg");
                $img.setAttribute("src","http://localhost:8081/user/captcha");

            }

        },

    }
</script>

<style>
    body{
        background: rgb(26,188,156);
    }
    .pople{
        position: absolute;
        top: 40px;
        left: 586px;
    }
    .login{
        margin:-166px auto;
    }
    .loginRoot {
        border-radius: 15px;
        position: absolute;
        top: 141px;
        left: 443px;
        width: 295px;
        padding: 15px 52px;
        background: aliceblue;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #c6c6c6;
    }
    .loginTitle {
        color: #1ABC9C;
    }
    p{
        color:  rgb(26,188,156);
        text-align:center;
    }
    .tubiao1{
        position: absolute;
        top: 68px;
        left: 9px;
    }
    .tubiao2{
        position: absolute;
        top: 68px;
        left: 870px;
    }
    #loginImg{
        height: 40px;
        width: 109px;
        position: absolute;
        top: 1px;
        left: 236px;
    }
</style>
